<!--
 * @Author: your name
 * @Date: 2021-10-27 14:53:04
 * @LastEditTime: 2021-10-28 09:16:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_cli\src\components\CommonAside.vue
-->
<template>
    <el-menu
      class="el-menu-vertical-demo"

      :collapse="isCollapse"
        background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <h3 v-show="!isCollapse">通用后台管理系统</h3>
      <h3 v-show="isCollapse">后台</h3>
      <el-menu-item
        :index="item.path"
        v-for="item in noChildren"
        :key="item.path"
        @click="clickMenu(item)"
      >
        <i :class="'el-icon-' + item.icon"></i>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
      <el-submenu
        :index="item.path"
        v-for="item in hasChildren"
        :key="item.path"
      >
        <template slot="title">
          <i :class="'el-icon-' + item.icon"></i>
          <span slot="title">{{ item.title }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            v-for="(subItem, subIndex) in item.children"
            :key="subIndex"
            :index="subItem.path"
          >
            <i :class="'el-icon-' + item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>

</template>

<script>
export default {
  data () {
    return {
      menu: [
        {
          path: '/',
          name: 'home',
          title: '首页',
          icon: 's-home',
          url: 'Home/Home'
        },
        {
          path: '/user',
          name: 'user',
          title: '用户管理',
          icon: 's-user',
          url: 'user/user'
        },

        {
          path: '/test',
          name: 'test',
          title: '测试菜单',
          icon: 'sunny',
          url: 'test/test',
          children: [
            {
              path: '/test1',
              name: 'test1',
              title: '测试菜单1',
              icon: 'sunny',
              url: 'test1/test1'
            },
            {
              path: '/test2',
              name: 'test2',
              title: '测试菜单2',
              icon: 'sunny',
              url: 'test2/test2'
            }
          ]
        }
      ]
    }
  },
  methods: {
    clickMenu (item) {
      this.$router.push({
        name: item.name
      })
    }

  },
  computed: {
    noChildren () {
      return this.menu.filter((item) => !item.children)
    },
    hasChildren () {
      return this.menu.filter((item) => item.children)
    },
    isCollapse () {
      return this.$store.state.tab.isCollapse
    }
  }
}
</script>
<style>

</style>
